import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() {
  runApp(MaterialApp(home: TextHomePage()));
}

class TextHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return TextHomePageState();
  }
}

class TextHomePageState extends State {
  int?selectedValue;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Text 讲解"),
        ),
        //Row/Column:继承自flex
        //  Flex：css Flex布局
        //  direction: Axis.horizontal 相对与row横向排列
        //  direction: Axis.vertical, 相当于column纵向排列
        /**
         * MainAxisAlignment 主轴
         * start    主轴开始的位置挨个摆放元素
         * end      主轴结束的位置挨个摆放元素
         * center   主轴的中心点对齐
         * spaceBetween   左右两边的间距为0其他元素之间平分
         * spaceAround    左右两边的间距是其他元素之间的一半
         * spaceEvenly 所有的间距平分
         */
        /**
         * crossAxisAlignment交叉轴
         *  start, 交叉轴开始位置对齐
         *  end, 交叉轴结束的位置对齐
         *  center, 中心点对齐
         *  stretch, 先让Row占据交叉轴尽可能大的空间，将所有的自widget交叉轴的高度拉伸到最大
         *  baseline, 基线对齐（必须有文本才能有效果）
         */
        //  row特点水平方向尽可能占据比较大的空间   --》水平方向也是希望包裹内容，那么设置mainAxisSize = min
        body: Row(//横向排列主要排列方向就是主轴垂直方向是交叉轴
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          textBaseline: TextBaseline.ideographic,//因为baselin没有默认值所以设置
          mainAxisSize:MainAxisSize.max,
          children: [
            Container(
              width: 80,
              height: 60,
              color: Colors.red,
              child: Text("Hello"),
            ),
            Container(
              width: 100,
              height: 90,
              color: Colors.green,
              child: Text("Hello"),
            ),
            Container(
              width: 80,
              height: 50,
              color: Colors.orange,
              child: Text("Hello"),
            ),
            Container(
              width: 80,
              height: 50,
              color: Colors.pink,
              child: Text("Hello"),
            ),
          ],
        )
    );
  }
}
